<template>
	<view class="home">
		<view class="addSession" @click="goto('/pages/fishTickets/addSession/index')">
			<image src="/static/home/addSession.png" mode="widthFix"></image>
			<view>添加鱼票场次</view>
		</view>
		<view class="flex-between time">
			<view class="left">近7天场次</view>
			<view class="right" @click="goto('/pages/fishTickets/histroySession/index')">历史全部场次</view>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y sessionList">
			<view class="sessionItem" v-for="item in sessionList">
				<view class="title flex-between">
					<view class="left">钓场：{{item.fish_place_name}}</view>
					<view class="right" style="font-size: 22rpx;">{{item.fish_new_type==0?'定时鱼票':'循环鱼票'}}</view>
				</view>
				<view class="title flex-between">
					<view class="left">场次：{{item.date}} {{item.title}}</view>
					<view  class="right2">当前禁止换位</view>
				</view>
				<view class="content">
					<view><label for="">场次状态：</label>{{item.now_state}}</view>
					<view v-if="item.fish_new_type==0"><label for="">开场时间：</label>{{item.start_time}}</view>
					<view v-if="item.fish_new_type==0"><label for="">结束时间：</label>{{item.end_time}}</view>
					<view v-if="item.fish_new_type==1"><label for="">开场时间：</label>{{item.venue_start_date}}</view>
					<view v-if="item.fish_new_type==1"><label for="">结束时间：</label>{{item.venue_end_date}}</view>
					<view v-if="item.hours"><label for="">垂钓时长：</label>{{item.hours}}</view>
					<view><label for="">收鱼价格：</label>{{item.collect_fish_price?item.collect_fish_price+'元/公斤':'未设置'}} <text class="set" @click="setPrice(item)">{{item.collect_fish_price?'修改':'设置'}}</text></view>
					<view class="red"><label for="">售票：</label>售票中（0/20）</view>
				</view>
				<view class="operations flex-around">
					<view class="operation" @click="control(item)">
						<image style="width: 40rpx;" :src="item.now_state=='未开始'?'/static/svg/operation2_red.svg':'/static/svg/operation2.svg'" mode="widthFix"></image>
						<view :class="item.now_state=='未开始'?'red':''">控制中心</view>
					</view> 
					<view class="operation" @click="goto('/pages/fishTickets/orderList/index', item.id)">
						<image style="width: 40rpx;" src="/static/svg/operation5_red.svg" mode="widthFix"></image>
						<view class="red">售票订单</view>
					</view>
					<view class="operation" @click="goto('/pages/fishTickets/collectingFish/index', item.id)">
						<image style="width: 40rpx;" src="/static/svg/operation4_red.svg" mode="widthFix"></image>
						<view class="red">收鱼</view>
					</view>
					<view class="operation" @click="goto('/pages/fishTickets/checkout/index', item.id)">
						<image style="width: 40rpx;" src="/static/svg/operation8_red.svg" mode="widthFix"></image>
						<view class="red">结账</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="bottom">
				<view class="priceset">
					<view class="title">设置收鱼价格 <uni-icons @click="close" class="close" type="close" color="#D43030" size="20"></uni-icons></view>
					<view class="content">
						<view class="flex-between" style="align-items: center;">
							<input class="numberInput" type="number" v-model="setPriceDate.price" placeholder="请输入收鱼价格"></input>
							<view class="unit">元/公斤</view>
						</view>
						<button class="save" @click="savePrice">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { get_fish_new, update_fish_news } from '@/utils/fishNew/index.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				setPriceDate:{
					price: '',
					id: null
				},
				inputType: 'text',
				sessionList:[]
			}
		},
		
	
		onLoad() {

		},
		onShow(){
			this.getList()
			console.log(123456)
		},
		methods: {
			setPrice(item) {
				this.setPriceDate.id = item.id
				this.setPriceDate.price = item.collect_fish_price?item.collect_fish_price:''
				this.$refs.inputDialog.open()
			},
			close() {
				this.$refs.inputDialog.close()
			},
			savePrice(){
				console.log(this.setPriceDate)
				update_fish_news({collect_fish_price: this.setPriceDate.price}, this.setPriceDate.id).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title: res.message,
							duration: 500
						});
						this.getList()
						this.$refs.inputDialog.close()
					}
				})
			},
			goto(url, id){
				uni.navigateTo({url:url+"?id="+id})
			},
			control(item) {
				if(item.now_state == '未开始'){
					uni.navigateTo({url:"/pages/fishTickets/operations/controlCenter?id="+item.id})
				}
			},
			getList() {
				get_fish_new().then(res=>{
					this.sessionList = res.data
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.home {
		height: 100vh; 
		overflow: hidden;
		.red{
			color: #D43030;
		}
		.addSession{
			width: 500rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			border-radius: 36rpx;
			background: #D43030;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin: 40rpx auto;
			font-weight: 600;
			image{
				width: 40rpx;
				margin-right: 20rpx;
			}
		}
		.time{
			font-size: 28rpx;
			padding-bottom: 30rpx;
			height: 40rpx;
			.left{
				border-left: 8rpx solid #D43030;
				padding-left: 10rpx;
				margin-left: 40rpx;
				font-weight: 600;
			}
			.right{
				color: #D43030;
				font-size: 24rpx;
				border-radius: 30rpx;
				background: #FFFFFF;
				padding: 0 28rpx;
				border: 2rpx solid #D43030;
				margin-right: 40rpx;

			}
		}
		.sessionList{
			height: calc(100vh - 240rpx);
			overflow-y: auto;
			background: rgba(243, 244, 246, 1);
			.sessionItem:nth-child(1){
				margin-top: 20rpx;
			}
			.sessionItem{
				background: #fff;
				padding: 20rpx 40rpx 0;
				margin-bottom: 20rpx;
				.title{
					height: 42rpx;
					line-height: 42rpx;
					margin-bottom: 20rpx;
					.left{
						border-left: 8rpx solid #D43030;
						padding-left: 10rpx;
						font-weight: 600;
						font-size: 26rpx;
					}
					.right{
						background: rgba(212, 48, 48, 1);
						color: #fff;
						padding: 0 12rpx;
						font-size: 24rpx;
					}
					.right2{
						color: rgba(212, 48, 48, 1);
						font-size: 24rpx;
					}
				}
				.content{
					font-size: 24rpx;
					line-height: 46rpx;
					margin-bottom: 30rpx;
					.uni-label-pointer{
						width: 144rpx;
						display: inline-block;
						color: #333;
					}
					.set{
						background: rgba(212, 48, 48, 1);
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}
				.operations{
					flex-wrap: wrap;
					font-size: 26rpx;
					text-align: center;
					.operation{
						width: 24.6%;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;
					}
					.operation:nth-child(1),.operation:nth-child(2),.operation:nth-child(3),.operation:nth-child(5),.operation:nth-child(6),.operation:nth-child(7){
						border-right: 1rpx solid #E5E5E5;
					}
				}
			}
		}
		.priceset{
			padding: 20rpx 0 60rpx;
			background-color: #fff;
			.title{
				height: 50rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
				border-bottom: 1px solid rgba(229, 229, 229, 1);
				position: relative;
				.close{
					position: absolute;
					right: 40rpx;
					font-weight: 400;
				}
			}
			.content{
				padding: 40rpx 40rpx 0;
				.numberInput{
					border: 1px solid #ccc;
					height: 50rpx;
					line-height: 50rpx;
					flex:1;
					padding: 0 20rpx;
				}
				.unit{
					padding-left: 20rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		:deep(uni-button.save){
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 30rpx;
			background: #D43030 !important;
			width: 400rpx !important;
			color: #fff;
			font-size: 24rpx;
			margin-top: 40rpx;
		}
	}
</style>
